<template>
  <div id="shareModal">
    <a-modal v-model:open="open" :title="title" :footer="false" @cancel="handleCancel">
        <h4>复制分享链接</h4>
        <a-typography-link copyable>
          {{link}}
        </a-typography-link>
        <div style="margin-bottom: 16px"></div>
        <h4>手机扫码查看</h4>
        <a-qrcode :value="link"></a-qrcode>
    </a-modal>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
//控制是否打开
const open = ref<boolean>(false);

interface props{
  //跳转的链接
  link:string,
  //标题
  title:string
}

const props = withDefaults(defineProps<props>(), {
  link:'',
  title:'分享图片'
})

/**
 * 关闭
 * @param e
 */
const handleCancel = () => {
  open.value = false;
};

/**
 * 打开
 */
const handleOpen = () => {
  open.value = true;
}

/**
 * 暴露给父组件
 */
defineExpose({
  handleOpen,
})

</script>

